<template>
  <div class="headerWrapper">
    <div class="content-wrapper">
      <div class="icon" @click="updateUserInfo">
        <img :src="userImg" alt="">
      </div>
      <div class="nickname"  @click="updateUserInfo">
        {{username}}
      </div>
    </div>
    <div class="bulletin-wrapper">
      <div class="balance" @click="toaccountLog">
        <div class="top-des">￥{{money}}</div>
        <div class="bottom-des">余额</div>
      </div>
      <div class="coupon" @click="toCoouponList">
        <div class="top-des">{{couponLen}}</div>
        <div class="bottom-des">优惠劵</div>
      </div>
      <!--<div class="invite">-->
        <!--<div class="top-des">{{inviteCount}}</div>-->
        <!--<div class="bottom-des">邀请</div>-->
      <!--</div>-->
    </div>
  </div>
</template>
<script>
  var LocalStorageUtil = require('./../../../commons/js/LocalStorageUtil.js')
  export default {
     data () {
      return {
      }
    },
    props: {
      couponLen: Number,
      money: Number,
      inviteCount: Number,
      userImg: String,
      username: String
    },
    components: {

    },
    created: function() {
      if(!this.userImg) {
        this.userImg = 'http://static.52letsgo.cn/zz/wechatimg/ic_user_head.png'
      }
    },
    methods: {
      toCoouponList () {
        if(this.judgeLogin()) {
          this.$router.go({path: '/couponList'})
        }
      },
      toaccountLog () {
        if(this.judgeLogin()) {
          this.$router.go({path: '/accountLog'})
        }
      },
      updateUserInfo () {
        if(this.judgeLogin()) {
          this.$router.go({path: '/updateUserInfo'})
        }
      },
      judgeLogin () {
        if(!LocalStorageUtil.getItem("User").id) {
          this.$router.go({path: '/login'})
          return false
        }
        return true
      }
    }
  }
</script>
<style>
.headerWrapper {
  position: relative;
  background-image: url(http://static.52letsgo.cn/zz/wechatimg/bg_user.png);
  background-repeat:no-repeat;
  background-size: cover;
  color: #fff;
  overflow: hidden;
  font-family: "Microsoft Yahei";
}
.headerWrapper .content-wrapper {
  position: relative;
  display: flex;
  padding: 2.5rem 30% 5.5rem 30%;
  min-height: 10rem;
  font-size: 1.2rem;
  flex-wrap: wrap;
}
.headerWrapper .content-wrapper .icon {
  height: 60%;
  width: 100%;
  display: block;
  text-align: center;
}
.headerWrapper .content-wrapper .icon img {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
}
.headerWrapper .content-wrapper .nickname {
  width: 100%;
  height: 40%;
  display: block;
  text-align: center;
  font-size: 1.3rem;
}
.headerWrapper .bulletin-wrapper {
  width: 100%;
  padding: .5rem 0;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
}
.headerWrapper .bulletin-wrapper .balance, .headerWrapper .bulletin-wrapper .coupon, .headerWrapper .bulletin-wrapper .invite {
  flex: 1;
  height: 100%;
  font-size: 1.3rem;
  text-align: center;
  line-height: 1.6rem;
}

.headerWrapper .bottom-des {
  color: #bebebe;
}
</style>
